@charset "utf-8";
.navs-con>ul li:first-of-type {
    position: relative;
}

.smallShou {
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 10;
    width: 50px;
    height: 50px;
    transform: rotate(-10deg);
    animation: ShouMove 1s infinite alternate-reverse;
}

.navs-con>ul li:first-of-type:hover .smallShou {
    display: none;
}

.navs-con>ul li:first-of-type:hover ul {
    display: none;
}

.navs-con li:first-of-type .smallHand {
    font-weight: bold;
    animation: showColor 1s infinite alternate-reverse;
}

.navs-con>ul li:first-of-type ul {
    position: absolute;
    width: 50px;
    height: 50px;
    /* background-color: red; */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.navs-con>ul li:first-of-type ul li {
    position: absolute;
    width: 0px;
    height: 0px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 100%;
    border: 3px solid blue;
    margin: auto;
}

.navs-con>ul li:first-of-type ul li:nth-child(1) {
    animation: showLiAni 4s 0s infinite;
}

.navs-con>ul li:first-of-type ul li:nth-child(2) {
    animation: showLiAni 4s 1.5s infinite;
}

.navs-con>ul li:first-of-type ul li:nth-child(3) {
    animation: showLiAni 4s 3s infinite;
}

@keyframes showLiAni {
    form {
        width: 0px;
        height: 0px;
        opacity: 1;
    }
    to {
        width: 50px;
        height: 50px;
        opacity: 0;
    }
}

@keyframes showColor {
    10% {
        color: #777871;
    }
    50% {
        color: green;
    }
    80% {
        color: yellow;
    }
    100% {
        color: red;
    }
}

@keyframes ShouMove {
    form {
        top: 30px;
        left: 0px;
    }
    to {
        top: 50px;
        left: -50px;
    }
}